<template>
	<view class="meal_index">
		<xbd-pages-content title="餐券管理">
		<template #content>
			<view class="content" :style="'minHeight:'+windowHeight+'px'">
				<view class="banner" >
					<image src="../../static/images/meal/banner.png" mode=""></image>
				</view>
				<view class="body">
					<view class="box" @click="useMeal">
						<view class="icon">
							<image src="../../static/images/meal/use.png" mode=""></image>
						</view>
						<text>可用餐券</text>
					</view>
					<view class="box box_marg" @click="myApply">
						<view class="icon">
							<image src="../../static/images/meal/apply.png" mode=""></image>
						</view>
						<text>我的申请</text>
					</view>
					<view class="box"  @click="approval">
						<view class="icon">
							<image src="../../static/images/meal/approval.png" mode=""></image>
						</view>
						<text>我的审批</text>
					</view>

				</view>
				<view class="bottom">
					<xbd-apply-card :cardIcon="require('../../static/images/meal/ordinaryIn.png')"  :cardBg="require('.../../static/images/meal/blue.png')"  cardTag="普通用餐申请" @clickApplyCard="ordinary()" ></xbd-apply-card>
					<xbd-apply-card :cardIcon="require('../../static/images/meal/selfIn.png')"  :cardBg="require('.../../static/images/meal/yellow.png')"  cardTag="自助餐申请" @clickApplyCard="self()"  ></xbd-apply-card>
					<xbd-apply-card :cardIcon="require('../../static/images/meal/tableIn.png')" :cardBg="require('.../../static/images/meal/purple.png')" cardTag="桌餐申请" @clickApplyCard="table()"  ></xbd-apply-card>
				</view>
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				windowHeight:0,
				permission:['部门负责人','综合管理部','综管部主任','餐券主管'],
			};
		},
		methods: {
			useMeal() {
			uni.navigateTo({
						url:'./usable/useList',
					})
			},
			myApply() {
			uni.navigateTo({
						url:'./myApply/myApply',
					})
			},
			approval() {
					uni.navigateTo({
						url: './approval/approval',
					})
			},
			ordinary() {
			uni.navigateTo({
						url:'./myApply/ordinaryApply',
					})
			},
			self() {
			uni.navigateTo({
						url:'./myApply/selfApply',
					})
			},
			table() {
			uni.navigateTo({
						url:'./myApply/tableApply',
					})
			},
		},
		computed: {
		},
		onLoad(){
			uni.getSystemInfo({
				     success:(res) =>{
						 this.windowHeight = res.windowHeight
				     }
				 });
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
.banner{
	height: 140px;
	image{
		height: 140px;
		width: 100%;
	}
}
.body{
	display: flex;
	background-color: #FFFFFF;
	box-sizing: border-box;
	margin: 5px 0;
	padding: 15px 50rpx;
	.box_marg{
		margin: 0 130rpx;
	}
	.box{
		width: 180rpx;
		text-align: center;
		font-size: 32rpx;
		.icon{
			margin:0 auto;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			margin-bottom: 30rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		text{
			color: #999999;
			white-space:nowrap;
			overflow:hidden; 
			text-overflow:ellipsis;
		}
	}
}
.bottom{
	flex: 1;
	background-color: #FFFFFF;
	padding: 30px 50rpx 0 50rpx;
}
</style>
